<template>
  <div class="min">
    <div class="common-layout">
      <el-container>
        <el-aside width="200px">
          <el-menu
            :collapse="false"
            :default-active="activeIndex2"
            class="el-menu-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="handleSelect"
          >
            <el-menu-item index="0">
              <template #title>
                <el-icon>
                  <Platform />
                </el-icon>
                <span>课堂后台管理系统</span>
              </template>
            </el-menu-item>
            <el-menu-item index="1">
              <template #title>
                <el-icon>
                  <Stopwatch />
                </el-icon>
                <span>仪表盘</span>
              </template>
            </el-menu-item>
            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <Bicycle />
                </el-icon>
                <span>权限管理</span>
              </template>
              <el-menu-item index="2-1">
                <template #title>
                  <el-icon>
                    <Headset />
                  </el-icon>
                  <span>用户管理</span>
                </template>
              </el-menu-item>
              <el-menu-item index="2-2">
                <template #title>
                  <el-icon>
                    <Iphone />
                  </el-icon>
                  <span>用户管理</span>
                </template>
              </el-menu-item>
              <el-menu-item index="2-3">
                <template #title>
                  <el-icon>
                    <Van />
                  </el-icon>
                  <span>权限管理</span>
                </template>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <Baseball />
                </el-icon>
                <span>讲师管理</span>
              </template>
              <el-menu-item index="3-1">
                <template #title>
                  <el-icon>
                    <Basketball />
                  </el-icon>
                  <span>讲师列表</span>
                </template>
              </el-menu-item>
              <el-menu-item index="3-2">
                <template #title>
                  <el-icon>
                    <Soccer />
                  </el-icon>
                  <span>添加讲师</span>
                </template>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <el-icon>
                  <Pouring />
                </el-icon>
                <span>课程分类管理</span>
              </template>
              <el-menu-item index="4-1">
                <template #title>
                  <el-icon>
                    <Sunny />
                  </el-icon>
                  <span>课程分类列表</span>
                </template>
              </el-menu-item>
              <el-menu-item index="4-2">
                <template #title>
                  <el-icon>
                    <Moon />
                  </el-icon>
                  <span>导入课程分类</span>
                </template>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="5">
              <template #title>
                <el-icon>
                  <Burger />
                </el-icon>
                <span>课程管理</span>
              </template>
              <el-menu-item index="5-1">
                <template #title>
                  <el-icon>
                    <Food />
                  </el-icon>
                  <span>课程列表</span>
                </template>
              </el-menu-item>
              <el-menu-item index="5-2">
                <template #title>
                  <el-icon>
                    <Chicken />
                  </el-icon>
                  <span>添加课程</span>
                </template>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="6">
              <template #title>
                <el-icon>
                  <Dessert />
                </el-icon>
                <span>轮播管理</span>
              </template>
              <el-menu-item index="5-1">
                <template #title>
                  <el-icon>
                    <IceTea />
                  </el-icon>
                  <span>轮播图列表</span>
                </template>
              </el-menu-item>
              <el-menu-item index="5-2">
                <template #title>
                  <el-icon>
                    <MilkTea />
                  </el-icon>
                  <span>添加轮播图</span>
                </template>
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item index="7">
              <template #title>
                <el-icon>
                  <Headset />
                </el-icon>
                <span>用户列表</span>
              </template>
            </el-menu-item>
            <el-sub-menu index="8">
              <template #title>
                <el-icon>
                  <Grape />
                </el-icon>
                <span>统计分析</span>
              </template>
              <el-menu-item index="8-1">
                <template #title>
                  <el-icon>
                    <ShoppingCart />
                  </el-icon>
                  <span>统计列表</span>
                </template>
              </el-menu-item>
              <el-menu-item index="8-2">
                <template #title>
                  <el-icon>
                    <ShoppingCartFull />
                  </el-icon>
                  <span>分析轮播图</span>
                </template>
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item index="9">
              <template #title>
                <el-icon>
                  <ShoppingCartFull />
                </el-icon>
                <span>订单列表</span>
              </template>
            </el-menu-item>
            <el-sub-menu index="10">
              <template #title>
                <el-icon>
                  <Memo />
                </el-icon>
                <span>文章管理</span>
              </template>
              <el-menu-item index="8-1">
                <template #title>
                  <el-icon>
                    <Notebook />
                  </el-icon>
                  <span>文章列表</span>
                </template>
              </el-menu-item>
              <el-menu-item index="8-2">
                <template #title>
                  <el-icon>
                    <Position />
                  </el-icon>
                  <span>添加文章</span>
                </template>
              </el-menu-item>
              <el-menu-item index="8-3">
                <template #title>
                  <el-icon>
                    <Star />
                  </el-icon>
                  <span>文章类别</span>
                </template>
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item index="11">
              <template #title>
                <el-icon>
                  <EditPen />
                </el-icon>
                <span>留言列表</span>
              </template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-header>
            <div>
              <!-- type="primary"类型为主要按钮 -->
              <el-button type="primary" :icon="Edit" />
              <el-button type="primary" :icon="Share" />
              <el-button type="primary" :icon="Delete" />
              <el-button type="primary" :icon="Search">Search</el-button>
              <el-button type="primary">
                Upload<el-icon class="el-icon--right">
                  <Upload />
                </el-icon>
              </el-button>
            </div>
          </el-header>
          <el-main>
            <div>
              <!-- v-model绑定value1 2 实现开关的开启关闭 -->
              <!-- --el-switch-on-color:和--el-switch-off-color:设置开关的开始和关闭的背景色 -->
              <!-- ml-2类将会被应用到<Switch>组件上，这个CSS类通常用于添加左边距 -->
              <el-switch v-model="value1" />
              <el-switch
                v-model="value2"
                class="ml-2"
                style="
                  --el-switch-on-color: #13ce66;
                  --el-switch-off-color: #ff4949;
                "
              />
              <br />
              <!-- active-text:switch 打开时的文字描述 inactive-text:switch 的状态为 off 时的文字描述-->
              <el-switch
                v-model="value3"
                class="mb-2"
                style="
                  --el-switch-on-color: #13ce66;
                  --el-switch-off-color: #ff4949;
                "
                active-text="Pay by month"
                inactive-text="Pay by year"
              />
              <br />
            </div>
            <div class="block text-center">
              <span class="demonstration"
                >Switch when indicator is hovered (default)</span
              >
              <el-carousel height="150px">
                <!-- v-for 循环el-carousel-item4次 v-bind key 动态绑定item 将item在h3中插值表达式显示-->
                <!-- 把想要展示的内容放在 el-carousel-item 标签内 -->
                <el-carousel-item v-for="item in 4" :key="item">
                  <h3 class="small justify-center" text="2xl">{{ item }}</h3>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="demo-collapse">
              <!-- 通过accordion设置手风琴模式 设置每次只能展开一个面板 -->
              <!-- v-modle：当前激活的面板(如果是手风琴模式，绑定值类型需要为string，否则为array)
                            当前的v-model的值为"1"，那么el-collapse-item的name为"1"的这一项就展开
                            绑定值为严格等于，如果v-model为1，而name为"1"(字符串)那也是不行的。-->
              <el-collapse v-model="activeName" accordion>
                <el-collapse-item
                  title="Consistency"
                  name="1"
                  @change="handleChange"
                >
                  <div>
                    Consistent with real life: in line with the process and
                    logic of real life, and comply with languages and habits
                    that the users are used to;
                  </div>
                  <div>
                    Consistent within interface: all elements should be
                    consistent, such as: design style, icons and texts, position
                    of elements, etc.
                  </div>
                </el-collapse-item>
                <el-collapse-item title="Feedback" name="2">
                  <div>
                    Operation feedback: enable the users to clearly perceive
                    their operations by style updates and interactive effects;
                  </div>
                  <div>
                    Visual feedback: reflect current state by updating or
                    rearranging elements of the page.
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
            <div>
              <!-- active	设置当前激活步骤 默认为0-->
              <!-- finish-status	设置结束步骤的状态 success图标为勾 -->
              <el-steps
                style="max-width: 600px"
                :active="active"
                finish-status="success"
              >
                <!-- title	标题 -->
                <el-step title="Step 1" />
                <el-step title="Step 2" />
                <el-step title="Step 3" />
              </el-steps>
              <!-- 绑定单击事件 -->
              <el-button style="margin-top: 12px" @click="next"
                >Next step</el-button
              >
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Delete, Edit, Search, Share, Upload } from "@element-plus/icons-vue"; //导入icon组件

const activeIndex2 = ref("1");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

// 设置开关初始值为开启
const value1 = ref(true);
const value2 = ref(true);
const value3 = ref(true);

const activeName = ref(["1"]);
const handleChange = (val: string[]) => {
  console.log(val);
};
const active = ref(0);

// 如果单击value的值大于2为true则返回最开始0
const next = () => {
  if (active.value++ > 2) active.value = 0;
};
</script>

<style scoped>
.el-aside {
  height: 800px;
  background-color: #6e7f92;
}

.el-header {
  background-color: antiquewhite;
}

.el-main {
  background-color: pink;
}

.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
